<template>
	<view class="ass_page">
		<uv-navbar placeholder title="售后申请" @leftClick="leftClick" />
		<view class="payment-success-container">
			<view class="success-content">
				<view class="success-icon"></view>
				<h1 class="success-title">撤销成功</h1>
				<p class="success-message">售后申请已撤销</p>
			</view>
		</view>
		<view class="footer-btn">
			<view class="order-actions">
				<!-- 联系客服 -->
				<uv-button class="contact-service" plain icon="kefu-ermai" size="normal" @click="contactService">
					联系客服
				</uv-button>
				<uv-button class="cancel-order" type="error" size="normal" @click="reApply">
					再次申请
				</uv-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import { backToTargetPage } from '@/util/tools'
	const order_id = ref(0)
	const leftClick = () => {
		backToTargetPage('pages-user/order')
	}
	onLoad((option) => {
		if (option.id) {
			order_id.value = option.id
		}
	})
	const reApply = () => {
		uni.navigateTo({
			url:'/pages-home/service/ass_apply?id=' + order_id.value
		})
	}
	
</script>

<style lang="scss" scoped>
	.ass_page {
		background-color: #f7f7f7 !important;
		min-height: 100vh;
		padding-bottom: 80px;
		width: 100%;
	}
	.payment-success-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: white;
		padding: 20px 15px;
		margin: 10px;
		border-radius: 8px;
		position: relative;
	}

	.success-content {
		text-align: center;
		max-width: 400px;
		width: 100%;
	}

	.success-icon {
		width: 80px;
		height: 80px;
		margin: 0 auto 20px;
		background-color: #4CAF50;
		border-radius: 50%;
		position: relative;
	}

	/* 使用CSS绘制对勾 */
	.success-icon::before {
		content: '';
		position: absolute;
		width: 24px;
		height: 12px;
		border-left: 4px solid white;
		border-bottom: 4px solid white;
		transform: rotate(-45deg);
		left: 50%;
		top: 50%;
		margin-left: -12px;
		margin-top: -8px;
	}

	.success-title {
		font-size: 24px;
		font-weight: 500;
		color: #333;
		margin-bottom: 15px;
	}

	.success-message {
		font-size: 16px;
		color: #999;
		line-height: 1.5;
	}
	
	.footer-btn {
		position: fixed;
		bottom: 20px;
		left: 0;
		right: 0;
		padding: 0 15px;
		background-color: #fff;
	
		.order-actions {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px;
		}
	
		.contact-service {
			flex: 1;
			margin-right: 10px;
			color: #999;
			border-color: #eee;
		}
	
		.contact-service ::v-deep .uv-button__icon {
			font-size: 20px;
		}
	
		.cancel-order {
			flex: 1;
			background-color: #d70012;
			color: #fff;
		}
	}
</style>